<template>
  <div class="register">
    <header-com title="绑定" moduleName="user"></header-com>
    <div class="input-box">
      <div class="phone-box">
        <span>手机号码</span>
        <input
          v-model="form.phone"
          type="number"
          pattern="[0-9]*"
          placeholder="请输入手机号码"
        />
      </div>
      <div class="phone-box check-code">
        <span>验证码</span>
        <input
          v-model="form.Code"
          type="number"
          pattern="[0-9]*"
          placeholder="请输入验证码"
          class="getInput"
        />
        <div class="getCode" @click="getCode" v-if="show">获取验证码</div>
        <div class="getCode" v-else>{{ count }}s</div>
      </div>
      <div class="phone-box">
        <span>姓名</span>
        <input v-model="form.name" type="text" placeholder="请输入姓名" />
      </div>
      <div class="phone-box">
        <span>证件类型</span>
        <!-- <input
          type="text"
          pattern="/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/"
          placeholder="请输入身份证号"
        /> -->
        <div class="select" @click="handleClickMe" :style="currentType!==''?{color:'#fff'}:{}">
          {{defaultValue}}
        </div>
      </div>
      <div class="phone-box">
        <span>证件号码</span>
        <input
          v-model="form.id_card"
          type="text"
          placeholder="请输入证件号码"
        />
      </div>
      <div class="sex-box phone-box">
        <span>性别</span>
        <span
          >男<input v-model="form.sex" type="radio" id="male" value="0"
        /></span>
        <span
          >女<input v-model="form.sex" type="radio" id="female" value="1"
        /></span>
      </div>
      <div class="conform" @click="conform">确定</div>
      <van-actionsheet v-model="showIdCard" :actions="actions" @select="onSelect" />
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      form: {
        password: "",
        password_again: "",
        phone: "",
        Code: "",
        sex: 0,
        id_card: "",
        id_card: "",
      },
      check: false,
      showIdCard: false,
      defaultValue:"请选择证件类型",
      currentType:"",
      actions:[{name:"身份证",type:0},{name:"其他证件",type:1}],
      show: true,
      count: "",
      timer: null,
      timers: null,
    };
  },

  methods: {
    handleClickMe(){
      this.showIdCard = true
    },
    onSelect(item){
      this.currentType = item.type
      this.defaultValue = this.actions[item.type].name
      this.showIdCard = false
    },
    checked: function () {
      if (
        !/^[1](([3][0-9])|([4][0-9])|([5][0-9])|([6][0-9])|([7][0-9])|([8][0-9])|([9][0-9]))[0-9]{8}$/.test(
          this.form.phone
        )
      ) {
        Toast("手机号码有误！");
        this.check = false;
        return false;
      }
      if (
        this.form.Code.trim() == "" ||
        this.form.Code.trim() == undefined ||
        this.form.Code.trim() == null
      ) {
        Toast("请输入验证码！");
        this.check = false;
        return false;
      } else if (
        this.form.name == "" ||
        this.form.name == undefined ||
        this.form.name == null
      ) {
        Toast("请输入姓名！");
        this.check = false;
        return false;
      } 
      else if (
        this.currentType === ""
      ) {
        Toast("请选择证件类型！");
        this.check = false;
        return false;
      }else if (
        this.form.id_card == "" ||
        this.form.id_card == undefined ||
        this.form.id_card == null
      ) {
        Toast("请输入证件号码！");
        this.check = false;
        return false;
      }

      this.check = true;
    },
    blur() {
      if (this.form.password == this.form.password_again) {
        return true;
      } else {
        Toast("您两次输入的密码不一致！");
        this.check = false;
        return false;
      }
    },
    getCode() {
      this.$axios
        .get("/mobile/v1/member/checkPhone", {
          params: {
            phone_number: this.form.phone,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            const TIME_COUNT = 60;
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.show = false;
              this.timers = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show = true;
                  clearInterval(this.timers);
                  this.timer = null;
                }
              }, 1000);
            }
            Toast("已发送验证码至您的手机，请注意查收");
          } else {
            Toast(res.data.message);
          }
        })
        .catch((res) => {
          //  console.log(res.msg);
        });
    },
    conform() {
      this.checked();
      if (this.check) {
        var params = new URLSearchParams();
        params.append("phone", this.form.phone);
        params.append("code", this.form.Code);
        params.append("id_card", this.form.id_card);
        params.append("card_type", this.currentType);
        params.append("name", this.form.name);
        params.append("sex", this.form.sex);
        // console.log(params);
        this.$axios
          .post("/mobile/v1/UserApply/bound_phone", params, {
            headers: {
              openid: window.localStorage.getItem("openid"),
            },
          })
          .then((res) => {
            if (res.data.code == 2000) {
              window.sessionStorage.setItem("token", res.data.data.token);
              // sessionStorage.removeItem("openid");
              sessionStorage.setItem("code", 2000);
              let isCompletedInfo = sessionStorage.getItem("isCompletedInfo");
              if (isCompletedInfo) {
                sessionStorage.removeItem("isCompletedInfo");
                this.$router.push({
                  path: "/match/apply",
                  query: {
                    id: isCompletedInfo,
                  },
                });
              } else {
                this.$router.replace({
                  path: "/mine",
                });
              }
              // this.$router.push({
              //   path: "/mine",
              // });
            } else {
              Toast(res.data.msg);
            }
          })
          .catch((res) => {
            //  console.log(res.msg);
          });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.conform {
  font-size: 0.4rem;
  font-weight: 700;
  width: 80%;
  margin: 0 auto;
  background: #42b572;
  color: #fff;
  border-radius: 25px;
  margin-top: 0.4rem;
  padding: 0.2rem 0;
}
.phone-box.sex-box {
  text-align: left;
  // margin-left: 23px;
  span:nth-child(1) {
    width: 20%;
    margin-left: 0.267vw;
  }
  span:nth-child(2) {
    margin-left: 0.533vw;
  }

  input {
    vertical-align: middle;
    margin-left: -2.667vw;
  }
}
  .select{
    display: inline-block;
    width: 78%;
    text-align: left;
    color: #94959a;
  }
.phone-box {
  border-bottom: 1px #94959a solid;
  margin: 0.2rem 0.4rem;
  padding-bottom: 0.2rem;
  box-sizing: border-box;

  &.check-code {
    display: flex;
    align-items: center;
    span {
      height: 100%;
      line-height: 100%;
      margin-left: 0.533vw;
    }
  }
  .getInput {
    flex: 1;
    margin-left: 3px;
    vertical-align: middle;
  }

  .getCode {
    width: 1.44rem;
    display: inline-block;
    color: #fff;
    border: 1px #ccc solid;
    padding: 0.1rem;
  }

  span {
    color: #fff;
    display: inline-block;
    width: 20%;
    text-align: left;
  }

  ::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #94959a;
  }

  :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #94959a;
  }

  ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #94959a;
  }

  :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #94959a;
  }

  input {
    background: transparent;
    border: none;
    color: #fff;
    display: inline-block;
    width: 78%;
    text-align: left;
  }
}

.input-box {
  // padding-top: 1rem;
  width: 100%; // float: left;

  // margin: 0 0.2rem;
  .phone {
    padding-top: 1rem;
    width: 100%;
    float: left;
    padding: 0.2rem;

    input {
      width: 4rem;
      height: 0.5rem; // border-radius: 5px 5px 5px 5px;
      color: black;
      font-size: 0.3rem; // border: 1px solid #ccc;
    }
  }

  .code-box > .code > input {
    float: left;
    width: 4rem;
    height: 0.5rem;
    margin-left: 0.2rem;
    border-radius: 5px 5px 5px 5px;
    border: none;
    color: black;
    font-family: "微软雅黑";
    margin-top: 0.21rem;
  }
}

button {
  width: 1.5rem;
  height: 0.58rem;
  background-color: skyblue;
  border: none;
  line-height: 0.5rem;
  border-radius: 5px 5px 5px 5px;
  margin-top: 0.9rem;
  text-align: center;
  color: black;
}
</style>
